<template>
  <el-dialog :title="$t('biPackage.biPackageSetting')" :visible.sync="dialogVisible" width="448px" @close="$emit('update:visible', false)">
    <div>
      <el-alert
          :title="infoText"
          type="success"
          :closable="false">
      </el-alert>
      <select-bi-packages v-if="dialogVisible" v-model="selectList" :maxBI="intelligenceNumber"></select-bi-packages>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="selectList.length === 0" v-loading="loading">{{ $t('save') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import selectBiPackages from '@/components/selectBiPackages'
export default {
  name: 'biPackageSetting',
  props: ['visible', 'intelligenceNumber', 'youBundles'],
  components: {
    selectBiPackages
  },
  data () {
    return {
      loading: false,
      dialogVisible: false,
      selectList: [],
      infoText: this.$t('billing.biPackageInfo')
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val
    }
  },
  methods: {
    async submit () {
      if (this.selectList.length === 0) {
        return false
      }
      this.loading = true
      const { rules, saveBiPackage } = this.$interface.pay
      const ids = this.selectList.map(item => {
        return item.appId
      })
      const { data } = await rules({
        ids: ids.join(',')
      })
      const params = data.data.map(item => {
        return {
          configCode: item.threshold.value,
          appId: item.appId,
          subscriptionId: this.youBundles.subscriptionId || null
        }
      })
      await saveBiPackage(this._.uniqWith(params, this._.isEqual))
      this.loading = false
      this.dialogVisible = false
    }
  },
  created () {
  }
}
</script>

<style scoped lang="scss">
.el-alert{
  margin-bottom: 8px;
  padding: 8px;
}
</style>
